<script setup>
import {weibo, baidu, zhihu, csdn, toutiao} from "@/apis/v1/hot/hot.js";
import {CaretBottom} from "@element-plus/icons-vue";
import {ElMessage} from "element-plus";
import List from "@/views/hot/components/list.vue";

const text = ref(null);
const weiboList = ref([]);
const isWeiBo = ref(true);
const baiDuList = ref([]);
const isBaiDu = ref(true);
const zhiHuList = ref([]);
const isZhiHu = ref(true);
const cdnList = ref([]);
const isCDN = ref(true);
const touTList = ref([]);
const isTouT = ref(true);
const searchUrl = ref("https://www.baidu.com/s?&wd=");
const handleCommit = () => {
  if (!text.value) {
    ElMessage.error("请输入搜索内容");
    return;
  }
  window.open(searchUrl.value + text.value, '_blank');
  text.value = null;
};

onMounted(() => {
  weibo().then(res => {
    weiboList.value = res.result;
    isWeiBo.value = false;
  });
  baidu().then(res => {
    baiDuList.value = res.result;
    isBaiDu.value = false;
  });
  zhihu().then(res => {
    zhiHuList.value = res.result;
    isZhiHu.value = false;
  });
  csdn().then(res => {
    cdnList.value = res.result;
    isCDN.value = false;
  });
  toutiao().then(res => {
    touTList.value = res.result;
    isTouT.value = false;
  });
});
</script>

<template>
  <article>
    <div class="content">
      <div class="nav">
        <div class="site-box myCenter">
          <img class="svg-icon" src="@/icons/svg/baidu.svg" alt="">
          <el-icon>
            <CaretBottom/>
          </el-icon>
        </div>
        <input class="input" type="text" placeholder="请输入内容"
               v-model="text" @keyup.enter="handleCommit">
        <div class="search-commit">
          <i class="iconfont icon-search"></i>
        </div>
      </div>
      <div class="hot">
        <div class="weibo">
          <div class="title">
            <span>微博热搜</span>
          </div>
          <List :loading="isWeiBo" :list="weiboList"></List>
        </div>
        <div class="baidu">
          <div class="title">
            <span>百度热搜</span>
          </div>
          <List :loading="isBaiDu" :list="baiDuList"></List>
        </div>
        <div class="zhi-hu">
          <div class="title">
            <span>知乎热搜</span>
          </div>
          <List :loading="isZhiHu" :list="zhiHuList"></List>
        </div>
        <div class="cdn">
          <div class="title">
            <span>CSDN热搜</span>
          </div>
          <List :loading="isCDN" :list="cdnList"></List>
        </div>
        <div class="headline">
          <div class="title">
            <span>头条热搜</span>
          </div>
          <List :loading="isTouT" :list="touTList"></List>
        </div>
      </div>
    </div>
  </article>
</template>

<style scoped lang="less">
article {
  padding: 60px 0 30px 0;
  width: 100%;
  height: 100%;
  background: var(--body-color);

  .content {
    margin: 20px auto 0;
    width: 1400px;

    .nav {
      margin: 0 auto;
      height: 40px;
      display: flex;
      justify-content: center;

      .site-box {
        height: calc(100% - 2px);
        line-height: 38px;
        border: 1px solid var(--border-line);
        border-right: none;
        padding: 0 20px 0 20px;
      }

      .input {
        padding-left: 15px;
        width: 60%;
        border-radius: 0 !important;
        border: 1px solid var(--border-line);
        background-color: var(--background-color);
        outline: none;

        &:focus {
          border: 1px solid var(--theme-color);
        }
      }

      .search-commit {
        cursor: pointer;
        height: calc(100% - 2px);
        line-height: 36px;
        border: 1px solid var(--border-line);
        border-left: none;
        display: inline-block;
        padding: 0 20px 0 20px;
      }
    }

    .hot {
      margin-top: 50px;
      display: grid;
      grid-template-columns: repeat(5, 1fr);

      .weibo .title {
        background: linear-gradient(135deg, #f403d1, #64b5f6);
      }

      .baidu .title {
        background: linear-gradient(135deg, #ffec61, #f321d7);
      }

      .zhi-hu .title {
        background: linear-gradient(135deg, #24ff72, #2196F3);
      }

      .cdn .title {
        background: linear-gradient(135deg, #1f7884, #b028a5);
      }

      .headline .title {
        background: linear-gradient(135deg, #d5bb3d, #3caf4f);
      }

      .weibo,
      .baidu,
      .zhi-hu,
      .cdn,
      .headline {
        width: 250px;
        margin-right: 30px;
        display: inline-block;

        .title {
          position: relative;
          width: 100%;
          height: 78px;
          text-align: center;
          overflow: hidden;
          border-top-left-radius: 5px;
          border-top-right-radius: 5px;

          span {
            position: absolute;
            top: 40%;
            left: 0;
            right: 0;
            bottom: 0;
            color: #fff;
            font-size: 16px;
            font-weight: bold;
          }
        }
      }
    }
  }
}
</style>